<template>
	<view>
		<view class="set-page">
			<view class="set-box">
				<!-- <view class="secret">
					<view>是否向所有人展示我的藏品</view>
					<u-switch :value="isShow" activeColor="#4ABC5A" :loading="loading" @change="changeStatus"></u-switch>
				</view> -->
				<view class="accounts" @click="toAccountAndSafe">
					<view>账号与安全</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<view class="accounts" @click="toAddress">
					<view>地址管理</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<view class="accounts" @click="toExamine" v-if="user.volunteer">
					<view>审核专区</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<!-- <view v-if="ringMac" class="ring" @click="showUnbindRing">
					<view>戒指</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view> -->
				<view class="agreement" @click="toOuterChain">
					<view>意见与反馈</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<view class="agreement" @tap="onBuiltinWebpage(3)">
					<view>用户协议</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<view class="secret" @tap="onBuiltinWebpage(1)" style="padding-top: ">
					<view>隐私政策</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>
				<view class="about" @tap="onBuiltinWebpage(2)">
					<view>关于轻松小镇</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view>

				<!-- <view class="accounts" @click="toConvert">
					<view>兑换藏品</view>
					<u-icon name="arrow-right" color="#C1C1C1"></u-icon>
				</view> -->
				<button type="default" @click="showPopup">退出登录</button>
				<popup :title="popupName" ensure="确认退出" ref="popupRef" @reserved="reserved"></popup>
			</view>
		</view>
		<view class="version">
			<view class="version-text" style="margin-bottom: 20rpx"> 版本号：{{ versionCode }} </view>
			<view class="version-text"> 版本名称：{{ version }} </view>
		</view>
	</view>
</template>

<script>
import popup from "./common/popup.vue";
import { mapState, mapMutations } from "vuex";
import { collectionStatus } from "../../api/user.js";
export default {
	components: { popup },
	data() {
		return {
			popupName: "",
			version: "",
			versionCode: "",
			isShow: false,
			loading: false,
		};
	},
	computed: {
		...mapState({
			user: (state) => state.userInfo,
		}),
	},
	onLoad() {
		this.isShow = this.user.criticismStatus;
	},
	onReady() {
		//#ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, async (appRes) => {
			this.version = appRes.version;
			this.versionCode = appRes.versionCode;
		});
		//#endif
	},
	methods: {
		...mapMutations(["deleteUserInfo"]),
		async changeStatus(val) {
			this.loading = true;
			try {
				const res = await collectionStatus({ criticismStatus: val });
				this.isShow = val;
				this.loading = false;
			} catch (e) {
				console.log(e);
				this.loading = false;
				uni.showToast({
					title: e.message || e.data,
					icon: "none",
				});
				//TODO handle the exception
			}
		},
		onBuiltinWebpage(res) {
			uni.navigateTo({
				url: `./BuiltInWebPage?type=${res}`,
			});
		},
		//弹窗
		showPopup() {
			this.$refs.popupRef.open();
			this.popupName = "要退出当前账号吗？";
		},
		//退出登录
		reserved() {
			this.deleteUserInfo();
			this.$refs.popupRef.close();
			this.$store.commit("setHideRingPage", true);
			uni.redirectTo({
				url: "./login",
			});
			
		},
		toAddress() {
			console.log("跳转");
			uni.navigateTo({
				url: "/pages/user/accountAddress",
			});
		},
		toAccountAndSafe() {
			uni.navigateTo({
				url: "./accountAndSafe",
			});
		},
		toOuterChain() {
			uni.navigateTo({
				url: "../index/outerChain?url=https://jinshuju.net/f/E2Vfht",
			});
		},
		toExamine() {
			uni.navigateTo({
				url: "../examine/index",
			});
		},
		toConvert() {
			uni.navigateTo({
				url: "./convertCollection",
			});
		},
	},
};
</script>

<style lang="scss">
.set-page {
	padding: 0 40rpx 0 40rpx;

	.secret,
	.agreement,
	.about,
	.accounts,
	.ring {
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		padding: 52rpx 0;
	}

	button {
		height: 99rpx;
		background: #4abc5a;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 99rpx;
		margin-top: 80rpx;
	}
}

.version {
	width: 100%;
	margin: 50rpx auto 50rpx;
	text-align: center;
	// position: fixed;
	// bottom: 50rpx;

	.version-text {
		color: #8f9091;
		font-size: $uni-font-size-base;
	}
}
</style>
